<template>
  <div class="select">
    <div class="close" @click="close">
      <span class="iconfont icon-X"></span>
    </div>
    <ul class="selectBox">
      <div class="loading" v-show="isShow">
        <span class="iconfont icon-jiazaizhong"></span>
      </div>
      <li class="title">{{ title }}</li>
      <li class="selectItem" v-for="(item,index) in itemList" :key="index" 
      @click="getList(item)">{{ item.provinceName || item.cityName || item.areaName }}</li>
    </ul>
  </div>
</template>

<script>
import { getSf, getCity, getArea } from "@/api/index";
export default {
  data() {
    return {
      title: "选择所在省份", //标题
      active: 0, //当前选择阶段
      sfId: "", //省份id
      cityId: "", //城市id
      itemList: [], //列表内容
      sfName: "", //省名
      cityName: "", //市名
      areaName: "", //区名
      isShow: true,
      provinceCode: ""
    };
  },
  created() {
    getSf().then(results => {
      this.itemList = results.data;
      this.isShow = false;
    });
  },
  methods: {
    getList(item) {
      this.isShow = true;
      if (this.active == 0) {
        this.provinceCode = item.provinceCode;
        this.sfName = item.provinceName;
        return getCity(item.provinceCode).then(results => {
          this.itemList = results.data;
          this.title = "选择所在城市";
          this.isShow = false;
          this.active = 1;
        });
      }
      if (this.active == 1) {
        this.cityName = item.cityName;
        return getArea(this.provinceCode, item.cityCode).then(results => {
          this.itemList = results.data;
          this.title = "选择所在地区";
          this.isShow = false;
          this.active = 2;
        });
      }
      if (this.active == 2) {
        this.areaName = item.areaName;
        const addrText =
          this.sfName + "  -  " + this.cityName + "  -  " + this.areaName;
        var flag = false;
        var obj = {
          province: this.sfName,
          city: this.cityName,
          area: this.areaName,
          addrText,
          flag
        };
        this.$emit("sendAddrInfo", obj);
        Object.assign(this.$data, this.$options.data());
        getSf().then(results => {
          this.itemList = results.data;
          this.isShow = false;
        });
      }
    },
    close() {
      var obj = {
        flag: false,
        province: '',
        city: '',
        area: '',
        addrText: '',
      };
      this.$emit("sendAddrInfo", obj);
      Object.assign(this.$data, this.$options.data());
      getSf().then(results => {
        this.itemList = results.data;
        this.isShow = false;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/base.scss";
.select {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 100%;
  max-width: 920px;
  top: 0;
  z-index: 999;
  .close {
    position: absolute;
    top: 6%;
    width: to(50);
    height: to(50);
    background-color: #fff;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    span {
      float: left;
      width: 100%;
      height: 100%;
      text-align: center;
      line-height: to(50);
      font-size: to(22);
      font-weight: bolder;
      color: #666;
    }
  }
  .selectBox {
    width: 90%;
    height: 75%;
    margin-left: 5%;
    background-color: #fff;
    margin-top: 25%;
    border-radius: to(10);
    list-style: none;
    overflow: auto;
    position: relative;
    padding: 0;
    li {
      border-bottom: 0.01rem solid #cfcfcf;
      height: to(70);
      box-sizing: border-box;
      line-height: to(70);
      padding-left: to(20);
    }
    .title {
      color: #aaa;
    }
    .loading {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #fff;
      display: flex;
      span {
        margin: auto;
        animation: rotate 1s linear infinite;
      }
      @keyframes rotate {
        100% {
          transform: rotate(720deg);
        }
      }
    }
  }
}
</style>
